<template>
  <div class="sdlist">
    <form action="/">
      <van-search :placeholder="`请输入${defaultplaceholder}`" v-model="sval" clearable show-action @search="onSearch" @clear="onCancel" style="position:fixed;top:0vh;left:0vw;width:85vw;z-index:1">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <div class="van-search" style="position:fixed;z-index:1;width:15vw;left:85vw;top:0.5vh;font-size:14px;line-height:34px;background:rgb(255,255,255);" @click="showSearchPopup"><van-icon @click="showSearchPopup" size="25px" name="filter-o" /></div>
    <van-popup v-model="searchshow" position="right" style="width:90vw;height:100vh">
      <div style="padding-top:1vh;padding-left:1vw;padding-right:1vw;">
        <form action="">
          <!--<van-field clearable v-for="condition in conditiondata" :key="condition.viewcondition_id" v-model="condition.viewcondition_value" :label="condition.viewcondition_title"/>-->
          <template v-if="searchshow && conditiondata.length > 0">
            <van-tree-select height="55vh" :items="items" :main-active-index.sync="mainactive">
              <template #content>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_uitype" v-if="conditiondata[mainactive].viewcondition_uitype === 'int' || conditiondata[mainactive].viewcondition_uitype === 'double' || conditiondata[mainactive].viewcondition_uitype === 'money' || conditiondata[mainactive].viewcondition_uitype === 'percent'">
                  <van-cell-group>
                    <van-cell title="等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell title="!=" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'noteq'">
                      <template #right-icon>
                        <van-radio name="noteq" />
                      </template>
                    </van-cell>
                    <van-cell title="大于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'bt'">
                      <template #right-icon>
                        <van-radio name="bt" />
                      </template>
                    </van-cell>
                    <van-cell title="大于等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'bteq'">
                      <template #right-icon>
                        <van-radio name="bteq" />
                      </template>
                    </van-cell>
                    <van-cell title="小于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'lt'">
                      <template #right-icon>
                        <van-radio name="lt" />
                      </template>
                    </van-cell>
                    <van-cell title="小于等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'lteq'">
                      <template #right-icon>
                        <van-radio name="lteq" />
                      </template>
                    </van-cell>
                    <van-cell title="空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'empty'">
                      <template #right-icon>
                        <van-radio name="empty" />
                      </template>
                    </van-cell>
                    <van-cell title="非空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notempty'">
                      <template #right-icon>
                        <van-radio name="notempty" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_comparison" v-else-if="conditiondata[mainactive].viewcondition_uitype === 'bool'">
                  <van-cell-group>
                    <van-cell title="=" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell title="!=" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'noteq'">
                      <template #right-icon>
                        <van-radio name="noteq" />
                      </template>
                    </van-cell>
                    <van-cell title="空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'empty'">
                      <template #right-icon>
                        <van-radio name="empty" />
                      </template>
                    </van-cell>
                    <van-cell title="非空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notempty'">
                      <template #right-icon>
                        <van-radio name="notempty" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_comparison" v-else-if="conditiondata[mainactive].viewcondition_uitype === 'datetime'">
                  <van-cell-group>
                    <van-cell title="等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell title="大于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'bt'">
                      <template #right-icon>
                        <van-radio name="bt" />
                      </template>
                    </van-cell>
                    <van-cell title="大于等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'bteq'">
                      <template #right-icon>
                        <van-radio name="bteq" />
                      </template>
                    </van-cell>
                    <van-cell title="小于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'lt'">
                      <template #right-icon>
                        <van-radio name="lt" />
                      </template>
                    </van-cell>
                    <van-cell title="小于等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'lteq'">
                      <template #right-icon>
                        <van-radio name="lteq" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_comparison" v-else>
                  <van-cell-group>
                    <van-cell title="包含" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'in'">
                      <template #right-icon>
                        <van-radio name="in" />
                      </template>
                    </van-cell>
                    <van-cell title="不包含" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notin'">
                      <template #right-icon>
                        <van-radio name="notin" />
                      </template>
                    </van-cell>
                    <van-cell title="等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell title="不等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'noteq'">
                      <template #right-icon>
                        <van-radio name="noteq" />
                      </template>
                    </van-cell>
                    <van-cell title="空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'empty'">
                      <template #right-icon>
                        <van-radio name="empty" />
                      </template>
                    </van-cell>
                    <van-cell title="非空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notempty'">
                      <template #right-icon>
                        <van-radio name="notempty" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <van-field v-model="conditiondata[mainactive].viewcondition_value" placeholder="请输入" />
              </template>
            </van-tree-select>
          </template>
          <div style="background:rgb(244,244,244);height:1vh"></div>
          <div style="padding-top:1vh;padding-left:2vw;padding-bottom:1vh;font-size:14px;">
            <van-radio-group v-model="radiovalue" direction="horizontal">
              <van-radio name="asc" icon-size="14px">升序</van-radio>
              <van-radio name="desc" icon-size="14px">降序</van-radio>
            </van-radio-group>
          </div>
          <input type="button" style="margin:1vw;width:27vw" :class="orderby == condition.viewcondition_field ? 'van-button van-button--primary van-button--small' : 'van-button van-button--default van-button--small'" v-for="condition in conditiondata" :key="condition.index" @click="chooseOrder(condition.viewcondition_field)" :value="condition.viewcondition_title" />
          <div style="background:rgb(244,244,244);height:1vh"></div>
          <!-- 不能使用van-button -->
          <input type="button" style="margin:1vw;width:27vw" class="van-button van-button--info van-button--small" value="查询" @click="query" />
          <input type="button" style="margin:1vw;width:27vw" class="van-button van-button--default van-button--small" value="清空" @click="clearquery" />
          <input type="button" style="margin:1vw;width:27vw" class="van-button van-button--default van-button--small" value="关闭" @click="searchshow = false" />
        </form>
      </div>
    </van-popup>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="margin-top:8vh;margin-bottom:8vh;">
      <van-list v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad">
        <van-checkbox-group v-model="selecteddata" ref="checkboxGroup">
          <van-cell v-for="(item, index) in list" :key="item.id" :value="item.value" @click="toggle(index)">
            <template #title>
              <span>{{ item.title }}</span><br>
              <span style="font-size: 12px;color: #969799;" v-html="item.label"></span>
            </template>
            <van-checkbox :name="item" ref="checkboxes" slot="right-icon" />
          </van-cell>
        </van-checkbox-group>
      </van-list>
    </van-pull-refresh>
    <van-tabbar v-model="active" safe-area-inset-bottom>
      <van-tabbar-item @click="openSDListSub">确定</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, Icon, SwipeCell, Dialog, Checkbox, CheckboxGroup } from 'vant'
import qs from 'qs'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(Icon).use(SwipeCell).use(Dialog).use(Checkbox).use(CheckboxGroup)
export default {
  name: 'list',
  data () {
    return {
      idobject: this.$route.query.idobject,
      sdtype: this.$route.query.sdtype,
      viewid: this.$route.query.viewid,
      subviewid: this.$route.query.subviewid,
      relopeid: this.$route.query.relopeid,
      refobject: this.$route.query.refobject,
      subrefobject: this.$route.query.subrefobject,
      sval: '',
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      active: 0,
      startline: 1,
      pagecount: 50,
      selecteddata: [],
      conditiondata: [],
      mainactive: 0,
      orderby: '',
      radiovalue: 'desc',
      searchshow: false,
      defaultplaceholder: '关键字'
    }
  },
  methods: {
    onLoad () {
      if (this.sdtype === 'syps') {
        this.defaultplaceholder = '客户'
      } else if (this.sdtype === 'zstg') {
        this.defaultplaceholder = '代理商'
      } else if (this.sdtype === 'dispatch') {
        this.defaultplaceholder = '客户'
      }
      let data = {
        'startline': this.startline,
        'pagecount': this.pagecount,
        'sdtype': this.sdtype,
        'condition': this.sval,
        'viewid': this.viewid,
        'relopeid': this.relopeid,
        'refobject': this.refobject
      }
      for (let i = 0; i < this.conditiondata.length; i++) {
        data[i + '_viewcondition_field'] = this.conditiondata[i].viewcondition_field
        data[i + '_viewcondition_relfield'] = this.conditiondata[i].viewcondition_relfield
        data[i + '_viewcondition_value'] = this.conditiondata[i].viewcondition_value
        data[i + '_viewcondition_comparison'] = this.conditiondata[i].viewcondition_comparison
        data[i + '_viewcondition_object'] = this.conditiondata[i].viewcondition_object
        data[i + '_viewcondition_uitype'] = this.conditiondata[i].viewcondition_uitype
      }
      this.axios({
        method: 'post',
        url: '/api/' + this.idobject + '.sdlist.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log(res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let rsdata = res.data.jsondata.fieldValue
          if (res.data.viewcondition?.length > 0) {
            this.defaultplaceholder = res.data.viewcondition.map(i => i.viewcondition_title).join('/')
          }
          for (let i = 0; i < rsdata.length; i++) {
            this.list.push(rsdata[i])
          }
          if (rsdata == null || rsdata.length === 0 || rsdata.length < this.pagecount) {
            this.loading = false
            this.finished = true
          } else {
            this.startline = this.startline + rsdata.length
            this.loading = false
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    showSearchPopup () {
      if (this.conditiondata.length === 0) {
        let data = {}
        this.axios({
          method: 'post',
          url: '/api/' + this.refobject + '.query.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === '1') {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          } else {
            //console.log(res)
            this.conditiondata = res.data.jsondata
            this.items = []
            if (this.conditiondata.length <= 0) {
              Toast('请先在开发平台配置高级查询条件')
              return
            }
            for (let i = 0; i < this.conditiondata.length; i++) {
              //console.log(this.conditiondata[i].viewcondition_title)
              this.items.push({ text: this.conditiondata[i].viewcondition_title })
            }
            this.searchshow = true
          }
        }).catch(res => {
          this.reserror(res)
        })
      } else {
        this.searchshow = true
      }
    },
    query () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.searchshow = false
      this.onLoad()
    },
    clearquery () {
      for (let i = 0; i < this.conditiondata.length; i++) {
        this.conditiondata[i].viewcondition_value = ''
      }
      // this.searchshow = false
      this.orderby = ''
    },
    onRefresh () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.isLoading = false
      this.onLoad()
    },
    onSearch () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onCancel () {
      this.sval = ''
    },
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
    },
    openSDListSub () {
      let selectedID = ''
      for (let i = 0; i < this.selecteddata.length; i++) {
        selectedID += this.selecteddata[i].id + ';'
      }
      if (!this.subviewid) {
        // 如果没有子表视图
        this.$router.push({ name: 'sdnew', query: { idobject: this.idobject, refobject: this.refobject, relopeid: this.relopeid, headid: selectedID, bodyid: '', sdtype: this.$route.query.sdtype, viewid: this.$route.query.viewid, subviewid: this.subviewid, subrefobject: this.$route.query.subrefobject } })
      } else {
        this.$router.push({
          name: 'sdlistsub',
          query: {
            idobject: this.idobject,
            refobject: this.refobject,
            relopeid: this.relopeid,
            selectedid: selectedID,
            subviewid: this.subviewid,
            subrefobject: this.subrefobject,
            sdtype: this.$route.query.sdtype,
            viewid: this.$route.query.viewid
          }
        })
      }
    }
  }
}
</script>
